<template>
  <div>
    <!-- 搜索框 -->
    <van-nav-bar class="page-nav-bar" fixed>
      <p slot="title" class="sou">
        <van-search shape="round" v-model="value" placeholder="搜索" @focus="focusSearch" />
      </p>
    </van-nav-bar>
    <!-- 频道列表 -->
    <van-tabs v-model="activeName">
      <van-tab v-for="(item, index) in channelList" :title="item.name" :name="index" :key="index">
        <!-- 下拉列表 -->
        <article-list :channels="item"></article-list>
        <!-- 下拉列表 -->
      </van-tab>
      <div slot="nav-right" class="place"></div>
      <div slot="nav-right" class="hanb">
        <i class="toutiao icongengduo" @click="show=true"></i>
      </div>
    </van-tabs>
    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      closeable
      close-icon-position="top-left"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <article-edit @father="editFather" :channelList="channelList" :activeName="activeName"></article-edit>
      <!-- @addchannel="edit" -->
      <!-- 我的频道 -->
      <!-- <div class="my">
        <van-cell title="我的频道">
          <template>
            <van-button plain hairline color="#f85959" type="info" round size="mini">编辑</van-button>
          </template>
        </van-cell>
        <van-grid :gutter="10">
          <van-grid-item :text="item2.name" v-for="(item2, index2) in channelList" :key="index2" />
        </van-grid>
      </div>-->
      <!-- 频道推荐 -->
      <!-- <div class="channel">
        <van-cell title="频道推荐" />
        <van-grid :gutter="10">
          <van-grid-item>
            <span class="add">+</span>
            <span class="txt">文字</span>
          </van-grid-item>
        </van-grid>
      </div>-->
    </van-popup>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { GET_TOKEN } from "@/utils/storage.js";
import articleList from "./components/article-list.vue";
import articleEdit from "./components/article-edit.vue";
import { channels_api, newchannels_api } from "@/api/user.js";
export default {
  data() {
    return {
      value: "",
      activeName: "a",
      channelList: [],
      show: false,
    };
  },
  created() {
    this.channels();
  },
  methods: {
    // 搜索框聚焦
    focusSearch() {
      this.$router.push("/search");
    },
    // 获取频道列表
    async channels() {
      // 判断是否登录  登录就发送请求  未登录就获取本地缓存
      if (this.user) {
        try {
          const res = await channels_api();
          if (res.status === 200) {
            this.channelList = res.data.data.channels;
          }
        } catch (err) {
          this.$toast.fail("获取用户频道列表失败");
        }
      } else {
        var storage = GET_TOKEN("chanelMy");
        // 如果本地缓存数据存在就获取本地缓存，否则就发送请求
        if (storage) {
          this.channelList = storage;
        } else {
          const res = await channels_api();
          this.channelList = res.data.data.channels;
        }
      }
    },
    // 根据索引跳转
    editFather(index, flag) {
      if (flag) {
        this.activeName = this.activeName - 1;
      } else {
        // this.activeName = index;
        this.activeName = index;
        this.show = flag;
      }
    },
    // edit() {
    //   this.channelList = GET_TOKEN("chanelMy");
    // },
  },
  components: {
    ...mapState(["user"]),
    articleList,
    articleEdit,
  },
};
</script>

<style lang="less">
.van-popup {
  z-index: 9999;
  .my {
    margin-top: 80px;
  }
}
.van-grid-item__content {
  display: flex;
  flex-direction: row;
  background-color: #f4f5f6;
  padding: 20px 5px;
  .add {
    font-size: 30px;
    margin-right: 5px;
  }
  .txt {
    font-size: 25px;
  }
}

.van-tabs__wrap {
  position: fixed;
  left: 0;
  right: 0;
  top: 92px;
  z-index: 999;
}
.van-tabs {
  padding: 182px 0 200px;
}
.sou {
  .van-search {
    background-color: transparent;
    .van-icon-search {
      margin-left: 150px;
    }
    .van-search__content {
      background-color: rgba(255, 255, 255, 0.2);
      .van-icon {
        color: #fff;
      }
    }
    ::placeholder {
      color: #fff;
    }
  }
}
.van-tabs {
  .van-tabs__wrap {
    .van-tab {
      padding: 0 60px;
      border-right: 1px solid #edeff3;
    }
  }
}
.hanb {
  position: fixed;
  right: 0;
  top: 92px;
  width: 66px;
  height: 82px;
  line-height: 82px;
  text-align: center;
  background-color: #fff;
}
.place {
  flex-shrink: 0;
  width: 66px;
  height: 82px;
}
.aut_name,
.comm_count {
  margin-right: 20px;
}
</style>
